<!-- 支付页需要传一个对象 对象有以下属性
  title 标题
  palyImg 支付图片
  phone 电话号码--账号
  price 价格
  goodsId 商品id
 -->
<template>
  <view id="allmap" v-if="paryData.name">
    <top-tabbar v-if="!appPlayState" tabTitle="确认订单" backColor="#ffffff" :titleStatus="true" @click="clickBack"></top-tabbar>
      <view class="popup-box">
        <view class="popup-main">
          <view class="order">
           <view class="order-img">
             <image style="border-radius: 20rpx;" mode="scaleToFill" :src="paryData.logoImageUrl"></image>
           </view>
           <view class="name-price">
             <view class="title-name">{{ paryData.name}}</view>
             <view class="price"><text class="RMB">￥</text>{{ paryData.price }}</view>
           </view>
          </view>
          <view class="from-item">
            <view class="item-from">
              <view>优惠券</view>
              <view style="color: #8C8C8C;">无可用</view>
            </view>
            <view class="item-from">
              <view>开通账号</view>
              <input
                class="phone-input" 
                placeholder="请输入手机号" 
                v-model="paryData.phone" 
                type="digit" 
                :maxlength="11"
                placeholder-style="height:50rpx;line-height: 50rpx;font-size: 28rpx;color: #8C8C8C;text-align: right;"
              />
            </view>
          </view>
        </view>
        <view class="actually-paid"><text style="color: #333333;">实付：</text><text style="font-size: 36rpx;font-weight: bold;">￥{{ paryData.price }}</text></view>
        <view class="primary btn-zoom"  @click="palyRightoff">支付</view>
      </view>
      <!-- 家长验证弹窗 -->
      <calculator ref="calculatorLoding" :randomNumber1="randomNumber1" :randomNumber2="randomNumber2"  @counterClick="counterClick"></calculator>
  </view>
</template>

<script>
  import topTabbar from '@/components/topTabbar/index.vue'
  import luoButton from '@/components/botton/luo-botton.vue'
  import { squeezePage, wxSubmitOrder, wxH5pay, buyClass } from '@/utils/api.js'
  import calculator from '@/components/loding/calculator.vue'
  export default{
    components: { luoButton,topTabbar, calculator},
    data() {
      return{
        pathUrl: '', // 地址参数
        randomNumber1: 0, // 随机数
        randomNumber2: 0, //随机数
        regPhone: /^[1][3,4,5,6,7,8,9][0-9]{9}$/, // 手机正则
        billNo:'', // 订单单号
        appPlayState: false, // app跳来支付
        pagination: null, // 页码 
        domain: window.location.protocol+"//" + window.location.host, // 当前协议与域名
        current: 0, // 默认0
        payType: 1, // 支付类型1是微信，3是支付宝
        paryData:{ // 页面回显的参数
          name:'',
          price:'',
          skuId:'',
          logoImageUrl:'',
          phone:'',
          platform: '',
          audstate: false // 是否是审核，默认不是
        },
        orderFrom: { // 订单参数
          address:{  phone:''},
          appName: 'shuidisw_web', // shuidisw_web默认是h5，shuidisw_mp是微信环境
          payType: '', // 1是微信支付，3是支付宝支付
          skus: [ { skuId: '', num: 1 } ]
        },
        payMethod: [
          { id: 1, name: '微信支付', icon: '\ueb06', color: '#4EED3A'},
          { id: 3, name: '支付宝支付', icon: '\ue688', color: '#34BAFF'}
        ]
      }
    },
    onLoad(params) {
      const vm = this
      vm.pathUrl = window.location.href.split('?')[1]
       if(params.platform) {
        vm.paryData.platform = params.platform.toLowerCase() // 转小写
      }
       if(vm.$auth.getUrlPrams("phone")) {
        vm.paryData.phone = vm.$auth.getUrlPrams("phone")
      }
      Window.InformAppExecuteOver = this.InformAppExecuteOver
      uni.removeStorageSync('appPlayState')
      // audstate为true是审核---
      if(vm.$auth.getUrlPrams("audstate")){
        let audsteatStr = vm.$auth.getUrlPrams("audstate").toLowerCase()
        vm.paryData.audstate = audsteatStr === 'true' ? true : false
      }
      if(vm.$auth.getUrlPrams("skuid")){
        // 如果是年课跳安卓支付
        if(params.skuid == 'a368d592-3f65-b9af-04ac-3a00150f4e72'){
          vm.paryData.price = 12
        }else if(params.skuid == '444e80df-20f1-17d2-7d5a-3a0016483644'){
          vm.paryData.price = 388
        }else{
          if(params.skuid == '4a77c1fd-bf3f-a9ab-365d-3a022c667994'){
            // if(!vm.paryData.audstate){
            //   uni.navigateTo({
            //     url: '/pages/my/order/payment?'+vm.pathUrl
            //   })
            //   return
            // }else{
              vm.paryData.price = 1648
            // }
          }
        }
        this.getDetail(params.skuid)
      }
      if(params.appPlayState == 1){
        this.appPlayState = true
        uni.setStorageSync("appPlayState",this.appPlayState)
      }
       vm.$wechat.unseBehavior()
    },
    methods:{
      // app调起的函数
      InformAppExecuteOver() {
        const vm = this
        uni.navigateTo({
          url: '/pages/my/order/payQuery?billNo='+vm.billNo+'&audstate='+vm.paryData.audstate+'&platform=' +vm.paryData.platform+'&phoneNumber='+vm.paryData.phone
        })
      },
      // 获取详情
      async getDetail(skuid) {
        const vm = this
        const res = await squeezePage(skuid)
        vm.paryData.name = res.name
        vm.paryData.skuId = res.id
        vm.paryData.logoImageUrl = res.logoImageUrl
      },
      // 返回上一页
      clickBack() {
        uni.navigateBack({})
      },
      // 单选框事件
      radioChange(e,id) {
        this.current = parseInt(e.detail.value)
        this.payType = id
      },
      // 临时打开家长确认弹窗
       palyRightoff() {
        const vm = this
        if (!vm.paryData.phone){
          uni.showToast({  title:'请输入手机号码！', icon:'none' })
          return false
        }
        if(vm.paryData.phone && !vm.regPhone.test(vm.paryData.phone)) {
          uni.showToast({  title:'手机号码格式不正确',icon:'none' })
          return false
        }
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 0
        })
        buyClass(vm.paryData.phone).then(res => {
          if(vm.paryData.skuId == 'a368d592-3f65-b9af-04ac-3a00150f4e72') {
            if(res.ownedExperienceCourse) {
              uni.showToast({  title:'您已经购买过体验课',icon:'none' }) 
            }else{
              vm.addParentloadin()
            }
          }
          if(vm.paryData.skuId == '444e80df-20f1-17d2-7d5a-3a0016483644'){
             if(res.ownedSystemCourse){
              uni.showToast({  title:'您已经购买过系统课',icon:'none' }) 
            }else{
              vm.addParentloadin()
            }
          }
          if(vm.paryData.skuId == '4a77c1fd-bf3f-a9ab-365d-3a022c667994'){
             if(res.ownedSystemCourse){
              uni.showToast({  title:'您已经购买过年课',icon:'none' }) 
            }else{
              vm.addParentloadin()
            }
          }
        })
      },
      // 打开家长弹窗
      addParentloadin() {
        const vm = this
        vm.randomNumber1 = Math.floor(Math.random()*10)
        vm.randomNumber2 = Math.floor(Math.random()*10)
        vm.$refs.calculatorLoding.getPopupOpen()
      },
      // 家长验证成功
      async counterClick() {
        const vm = this
        this.$refs.calculatorLoding.getPopupConcal()
        // 创建订单--参数赋值
        vm.orderFrom.address.phone = vm.paryData.phone
        vm.orderFrom.payType = 5
        vm.orderFrom.skus[0].skuId = vm.paryData.skuId
        if(vm.$wechat.isWechat()){
            vm.orderFrom.appName = 'shuidisw_mp'
            vm.orderFrom.openId = uni.getStorageSync('openId')
        }else{
          delete vm.orderFrom.openId
        }
        const orderData = await wxSubmitOrder(vm.orderFrom)
          // ios通知app支付
          if(vm.paryData.skuId === '4a77c1fd-bf3f-a9ab-365d-3a022c667994'){
            vm.paryData.skuId = '444e80df-20f1-17d2-7d5a-3a0016483644'
          }
          let strSkuId = vm.paryData.skuId.replace(/-/g,'_')
          vm.billNo = orderData.billNo
           let ifr = document.getElementById("iframe");
           if(ifr){document.body.removeChild(ifr)}
           ifr = document.createElement("iframe");
           let url = 'uniwebview://iosPay?type=1&method=iosPay&parame='+orderData.amount+','+ orderData.appName+ ','+ orderData.billNo +','+ orderData.description+','+orderData.payType+','+strSkuId
           ifr.setAttribute('src', url);  
           ifr.setAttribute('style', 'display:none'); 
           ifr.setAttribute('id','iframe');
           document.body.appendChild(ifr); 
      }
    }
  }
</script>

<style lang="scss" scoped>
  // 支付弹窗
  .popup-box{
    width: 100%;
    background: #ffffff;
    padding: 32rpx  40rpx;
    padding-bottom: env(safe-area-inset-bottom);
    text-align: center;
    .popup-main{
      .order{
        display: flex;
        align-items: center;
        padding: 16rpx;
        background: #FFFAF5;
        border-radius: 20rpx;
        margin-bottom: 36rpx;
        .order-img{
          width: 176rpx;
          height: 176rpx;
        }
        .name-price{
          // width: 50%;
          text-align: left;
          margin-left: 32rpx;
          .main-title{
            font-size: 24rpx;
            color: #8C8C8C;
          }
          .title-name{
            font-weight: 500;
            font-size: 32rpx;
            color: #262626;
          }
          .price{
            color: #FE8512;
            font-size: 32rpx;
            font-weight: bold;
            margin-top: 40rpx;
          }
          .RMB{
            font-size: 24rpx;
          }
        }
      }
      .from-item{
        .pay-way{
          text-align: left;
          .way-list{
            width: 100%;
            height: auto;
            background: #F5FEFF;
            border-radius: 20rpx;
            margin-top: 18rpx;
            padding: 30rpx 18rpx 0 18rpx;
            .pay-wx-Alipay{
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding-bottom: 30rpx;
              .pay-name{
                display: flex;
                align-items: center;
                .payIcon{
                  font-size: 60rpx;
                }
                .pay-title{
                  margin-left: 10rpx;
                  font-size: 28rpx;
                  color: #262626;
                }
              }
              // 修改单选框样式
              uni-radio /deep/ .uni-radio-input{
                width: 32rpx !important;
                height: 32rpx !important;
                margin-right: 0 !important;
                border: 2rpx solid #FF800C !important;
              }
              uni-radio /deep/ .uni-radio-input.uni-radio-input-checked:before{
                -webkit-transform: translate(-50%,-48%) scale(.6) !important;
              }
            }
          }
        }
        .item-from{
          width: 100%;
          height: 90rpx;
          border-bottom: 2rpx solid #eeeeee;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 28rpx;
          .phone-input{
            font-size: 28rpx;
            height: 50rpx;
            text-align: right;
          }
        }
      }
    }
    .actually-paid{
      padding: 36rpx 0 72rpx 0;
      text-align: left;
      font-size: 28rpx;
      color: #FF840F;
    }   
    .primary{
      width: 680rpx;
      padding: 6rpx 0;
      border-radius: 44rpx;
      text-align: center;
      background: #FF800C;
      font-weight: bold;
      font-size: 48rpx;
      letter-spacing: 0.2em;
      color: #FFFFFF;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 48rpx;
      margin: auto;
    }
  }
</style>
